<template>
  <div class="main">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="140px"
      class="demo-ruleForm"
    >
      <div class="fy">
        <el-form-item label="手机号" prop="userName">
          <el-input @input="change" maxlength="11" v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <span v-if="du" class="zi1">{{ma}} </span>
        <el-button :disabled="states" @click="yan" size="mini">验证码</el-button>
        <!-- <el-button  size="mine" round class="btn">主要按钮</el-button> -->
      </div>

      <el-form-item label="验证码" prop="code">
        <el-input maxlength="6" v-model="ruleForm.code"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password"></el-input>
      </el-form-item>

      <el-form-item label="省份" prop="province">
        <el-select v-model="ruleForm.province" placeholder="请选择省份">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio :label="0" v-model="ruleForm.sex">男</el-radio>
          <el-radio :label="1" v-model="ruleForm.sex">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-select v-model="ruleForm.age" placeholder="请选择年龄">
          <el-option
            v-for="(item, index) in ages"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="照顾对象昵称" prop="carePeopleName">
        <el-input v-model="ruleForm.carePeopleName"></el-input>
      </el-form-item>

      <el-form-item label="照顾对象年龄" prop="carePeopleAge">
        <el-select
          v-model="ruleForm.carePeopleAge"
          placeholder="请选择照顾对象年龄"
        >
          <el-option
            v-for="(item, index) in ages"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="照顾对象性别" prop="carePeopleSex">
        <el-radio-group v-model="ruleForm.carePeopleSex">
          <el-radio :label="0" v-model="ruleForm.carePeopleSex">男</el-radio>
          <el-radio :label="1" v-model="ruleForm.carePeopleSex">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="与照顾对象关系" prop="carePeopleRelation">
        <el-input v-model="ruleForm.carePeopleRelation"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >注册</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <div @click="jump" class="gg">已有账号，立即去登录</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: "河南", value: "河南" },
        { label: "北京", value: "北京" },
        { label: "湖南", value: "湖南" },
        { label: "湖北", value: "湖北" },
        { label: "广东", value: "广东" },
        { label: "广西", value: "广西" },
        { label: "河北", value: "河北" },
        { label: "山东", value: "山东" },
        { label: "山西", value: "山西" },
        { label: "江苏", value: "江苏" },
        { label: "浙江", value: "浙江" },
        { label: "江西", value: "江西" },
        { label: "黑龙江", value: "黑龙江" },
        { label: "新疆", value: "新疆" },
        { label: "云南", value: "云南" },
        { label: "贵州", value: "贵州" },
        { label: "福建", value: "福建" },
        { label: "吉林", value: "吉林" },
        { label: "安徽", value: "安徽" },
        { label: "四川", value: "四川" },
        { label: "西藏", value: "西藏" },
        { label: "宁夏", value: "宁夏" },
        { label: "辽宁", value: "辽宁" },
        { label: "青海", value: "青海" },
        { label: "甘肃", value: "甘肃" },
        { label: "陕西", value: "陕西" },
        { label: "内蒙古", value: "内蒙古" },
        { label: "台湾", value: "台湾" },
        { label: "上海", value: "上海" },
        { label: "天津", value: "天津" },
        { label: "香港特别行政区", value: "香港特别行政区" },
        { label: "澳门特别行政区", value: "澳门特别行政区" },
        { label: "台湾省", value: "台湾省" },
      ],
      ages: [],
      ruleForm: {
        userName: "",
        password: "",
        province: "",
        sex: "",
        age: "",
        carePeopleName: "",
        carePeopleAge: "",
        carePeopleSex: "",
        carePeopleRelation: "",
        code: "",
      },
      du:false,
      states: true,
      ma: 60,
      rules: {
        userName: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "长度为 11位", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入正确的密码格式", trigger: "blur" },
          { min: 3, max: 11, message: "长度为3到11位", trigger: "blur" },
        ],
        province: [
          { required: true, message: "请选所在省份", trigger: "change" },
        ],
        age: [{ required: true, message: "请选择年龄", trigger: "change" }],
        carePeopleName: [
          { required: true, message: "请输入照顾对象的昵称", trigger: "blur" },
          { min: 1, max: 7, message: "不符", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        carePeopleAge: [
          { required: true, message: "请选择年龄", trigger: "change" },
        ],
        carePeopleSex: [
          { required: true, message: "请选择性别", trigger: "change" },
        ],
        carePeopleRelation: [
          { required: true, message: "请输入与照顾对象关系", trigger: "blur" },
        ],

        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 6, max: 6, message: "长度为 6位", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    for (var i = 0; i <= 100; i++) {
      this.ages.push({ label: i, value: i });
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.login();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    jump() {
      this.$router.push("/login");
    },
    change(val){
    console.log(val.length);
    if(val.length==11){
      this.states=false
    }
    },
    async login() {
      let formData = new FormData();
      for (const key in this.ruleForm) {
        formData.append(key, this.ruleForm[key]);
      }
      let res = await this.$http.post("/user/register", formData);
      console.log(res);
      if (res.code == 5001) {
        this.$message.error("用户已经存在,请直接去登录");
        this.$router.push("/login")
      } else if (res.code == 1001) {
        this.$message({
          message: '恭喜你，注册成功',
          type: 'success'
        });
        this.jump();
      }else if(res.code==4001){
        this.$message.error('错了哦，验证码错误');
      }
    },
    async yan() {
      this.du=true
      this.ma=60
      this.states=true
      let timer= setInterval(() => {
        this.ma--;
         if(this.ma>=0){
         this.states=true
      }
      if(this.ma==0){
        // this.ma==0
        clearInterval(timer)
        this.states=false
      }
      }, 1000);

      let formData = new FormData();
      console.log(this.ruleForm.userName);
      formData.append("phone", this.ruleForm.userName);
      let res = await this.$http.post(`/send/sms`, formData);
      console.log(res);
    },
  },
};
</script>

<style scoped>
.main {
  width: 30%;
  position: absolute;
  left: calc(50% - 18%);
  top: 25px;
  /* border: 1px solid black; */
  padding: 60px 50px 70px 25px;
  box-shadow: -1px 1px 5px black;
}
.fy {
  /* padding-right: px; */
  display: flex;
}
/* .btn{
  display: block; 
  height: 27px;
  margin: 6px 0 0 5px;
 width: 75px;
 text-align: center;
 line-height: 30px;
 background: #409eff;
 border-radius: 3px;
 font-size: 12px;
 cursor: pointer;
} */
/* .el-button[data-v-37ba5172]{
  width: 75px;
  height: 27px;
} */
.el-button[data-v-37ba5172] {
  width: 80px;
  height: 36px;
  /* line-height: 29px; */
  font-size: 12px;
  margin: 1px 0 0 50px;
}
.el-form-item__label {
  font-size: 16px;
  /* line-height: 75px; */
}
.el-input__inner {
  height: 30px;
}
.el-form-item__content {
  line-height: 42px;
}
.el-form-item__error {
  position: absolute;
  top: 80%;
  left: 0;
}
.el-select-dropdown__item {
  height: 30px;
  line-height: 30px;
}
.el-radio__inner {
  width: 13px;
  height: 13px;
  margin-left: 25px;
}
.el-radio__label {
  padding-right: 25px;
}
.el-button {
  width: 100px;
  height: 40px;
}
.gg {
  position: absolute;
  right: 50px;
  cursor: pointer;
  color: #409eff;
  font-size: 13px;
}
.zi1 {
  display: inline-block;
  /* margin: 8px 0 0 60px; */
  color: gray;
  position: absolute;
  right: 248px;
  top: 70px;
}

@media screen and (max-width:768px){
  .main{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: 0px 0px 0px black;
  }
  .el-input__inner{
  width: 50%;
  }
  .el-form-item__label{
    font-size: 12px;
  }
}
</style>